<template>
  <!-- 施工计量(万) -->
  <div class="construction-wrap">
    <div class="title-wrap">
      <div class="flex-row title">
        <div class="dot"></div>
        施工计量(万元)
      </div>
      <!-- 多项目 -->
      <div class="btnMonth">
        <el-date-picker v-if="!projectId" v-model="curMonth" :clearable="false" @change="onMonthChanged" size="mini" type="month" placeholder="选择月份" style="width:120px"></el-date-picker>
      </div>
    </div>
    <!-- 多项目 -->
    <div class="content-wrap flex-row" style="display: flex" v-if="!projectId">
      <div class="construction-left WholeScroll">
        <div class="construction-search-box" :class="{ 'construction-active': data.activeName === item.name }" v-for="item in data.list" @click="onClickLeftItem(item)">
          <div class="samll-text">{{ item.name }}</div>
          <div class="weight-text">{{ item.measureSum }}</div>
        </div>
      </div>
      <div class="construction-right" style="overflow: hidden;" @click="onGoto">
        <div id="construction-bar" style="height: 100%"></div>
      </div>
    </div>
    <!-- 单项目 -->
    <div class="content-wrap flex-row" v-else>
      <div class="construction-left WholeScroll">
        <div class="construction-search-box" style="justify-content: center;" v-for="item in data.list" :class="{ 'construction-active': data.activeName === item.name }" @click="onClickLeftItem(item)">
          <div class="weight-text" style="font-size: 24px;line-height: 48px">{{ item.code }}</div>
        </div>
      </div>
      <div class="construction-right">
        <div class="construction-number-wrap">
          <div class="construction-number">
            <span>合同金额</span>
            <span>{{ data.contractSum }}</span>
          </div>
          <div class="construction-number">
            <span>累计计量</span>
            <span>{{ data.measureSum }}</span>
          </div>
          <div class="construction-number">
            <span>完成百分比</span>
            <span>{{ data.percent }}%</span>
          </div>
        </div>
        <div id="construction-bar" style="overflow: hidden;"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: 'construction',
  data() {
    return {
      curMonth: this.data.month, // 当前选中月份
      value: '',
      chartInstance: {}
    };
  },
  props: {
    projectId: {
      type: String,
      default: '' // 空为多项目
    },
    data: {
      type: Object,
      default: {
        month: new Date(`${new Date().getFullYear()}-${new Date().getMonth()}`),
        activeName: '',
        contractSum: 0, //合同金额
        measureSum: 0, //本月计量
        percent: 0, //百分比
        list: []
      }
    }
  },

  computed: {
  },
  watch: {
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.drawContent();
        });
      },
      immediate: true
    },

    data: {
      handler(val) {
        this.$nextTick(() => {
          this.drawContent();
        });
      },
      immediate: true
    }
  },

  methods: {
    onGoto() {
      const rData = this.$router.resolve({ path: '/contract/measureRegistration' })
      window.open(rData.href, '_blank')
    },
    drawContent() {
      if (this.data.list.length == 0) return;
      let data = this.data.list[0];
      this.drawBar(data);
    },
    onClickLeftItem(data) {
      this.drawBar(data)
    },
    drawBar(data) {
      this.data.activeName = data.name;
      // 如果是单项目
      if (this.projectId) {
        this.data.contractSum = data.contractAmount;
        this.data.measureSum = data.measureSum;
        this.data.percent = ((data.measureSum / data.contractAmount) * 100).toFixed(2);
      }
      // 重置实例
      if (this.chartInstance['construction-bar']) {
        this.chartInstance['construction-bar'].clear();
        this.chartInstance['construction-bar'].dispose();
      }
      let chartDom = document.getElementById('construction-bar');
      let myChart = echarts.init(chartDom);
      this.chartInstance['construction-bar'] = myChart;
      let option = {
        grid: {
          left: '0%',
          right: '0%',
          bottom: '4%',
          top: 30,
          containLabel: true
        },
        tooltip: {
          show: 'true',
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter(params) {
            // console.log(params);
            // 合同金额 本月计量 百分比
            params = params[0];
            let percent = (data.list[params.dataIndex].thisPeriodAmount / data.list[params.dataIndex].contractAmount) * 100;
            if (data.list[params.dataIndex].contractAmount === 0) {
              percent = 0;
            }
            if (isNaN(percent)) {
              percent = 0;
            }
            percent = percent.toFixed(2);
            return [
              `<div>合同金额:${data.list[params.dataIndex].contractAmount}</div>`,
              `<div>本月计量:${data.list[params.dataIndex].thisPeriodAmount}</div>`,
              `<div>百分比:${percent}%</div>`
            ].join('');
          },
          rich: {
            a: {},
            b: {},
            c: {}
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          splitLine: {
            lineStyle: {
              color: 'rgba(108,128,151,0.3)'
            }
          },
          splitNumber: 5,
          name: '%  ',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'black'
              }
            },
            axisLabel: {
              show: true
              // rotate: 20
            },
            data: data.list.map(item => item.name)
          }
        ],
        series: [
          {
            name: '数据1',
            type: 'bar',
            itemStyle: {
              show: true,
              color: '#3982FA',
              borderRadius: [8, 8, 0, 0]
            },
            barGap: '0%',
            barCategoryGap: '50%',
            barWidth: 20,
            data: data.list.map(item => (100 * item.thisPeriodAmount) / item.contractAmount)
          }
        ]
      };
      option && myChart.setOption(option);
    },

    timeFormat(Date, fmt = 'yyyy-MM-dd') {
      // "yyyy-MM-dd hh:mm:ss.S" ==> 2006-07-02 08:09:04.423
      // "yyyy年M-d h:m:s.S"      ==> 2006年7-2 8:9:4.18
      if (typeof Date === 'string') {
        Date = new window.Date(Date.replace(/-/g, '/'));
      }
      if (!(Date instanceof window.Date)) {
        console.log('时间格式化失败');
        return '';
      }
      const o = {
        'M+': Date.getMonth() + 1,
        'd+': Date.getDate(),
        'h+': Date.getHours(),
        'm+': Date.getMinutes(),
        's+': Date.getSeconds(),
        'q+': Math.floor((Date.getMonth() + 3) / 3)
        // 'S': Date.getMilliseconds()
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (Date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
        }
      }
      return fmt;
    },
    onMonthChanged() {
      this.$emit("onMonthChanged", this.curMonth)
    }
  }
};
</script>
<style lang="scss" scoped>
.flex-row {
  display: flex;
  flex-direction: row;
}

.construction-wrap {
  background-color: #fff;
  border-radius: 15px;
  padding: 16px 24px 24px 24px;
  flex-grow: 1;
  height: 394px;
  .construction-left {
    width: 200px;
    max-height: 100%;
    overflow-y: auto;
    padding-top: 10px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .construction-search-box {
      background-color: #f2f6ff;
      border-radius: 10px;
      width: 175px;
      cursor: pointer;
      padding: 13px 13px 13px 13px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:not(:first-child) {
        margin-top: 15px;
      }
      .samll-text {
        color: #000000;
        font-size: 14px;
        line-height: 23px;
      }

      .weight-text {
        font-size: 24px;
        color: #000000;
        font-weight: bold;
        line-height: 23px;
      }
    }

    .construction-active {
      background: linear-gradient(to right, #23a0ff, #1e70fa);
      position: relative;

      &::before {
        content: "";
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 20px solid #1e70fa;
        display: inline-block;
        position: absolute;
        right: -16px;
        top: 0;
        bottom: 0;
        margin: auto 0;
      }

      & > div {
        color: #fff !important;
      }
    }
  }

  .construction-right {
    width: calc(100% - 235px);
    height: 100%;
    #construction-bar {
      height: 80%;
      width: 100%;
    }

    .construction-number-wrap {
      height: 20%;
      width: 100%;
      display: flex;
      justify-content: right;

      .construction-number {
        min-width: 186px;
        height: 32px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
        padding: 0 13px;
        border-radius: 5px;
        border: 1px #cccccc solid;
        margin-left: 14px;

        & > span:first-of-type {
          color: #000;
          font-size: 14px;
        }

        & > span:last-of-type {
          color: #005fff;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}

.title-wrap {
  display: flex;
  height: 45px;
  border-bottom: 1px #e6e8ef solid;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  align-items: center;

  .title {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
    align-items: center;
    .dot {
      height: 4px;
      width: 4px;
      background-color: #005fff;
      border-radius: 4px;
      margin-right: 8px;
    }
  }

  .btnMonth {
    color: #666666;
    font-size: 14px;
    cursor: pointer;
  }
}

.content-wrap {
  height: calc(100% - 55px);
  width: 100%;
  overflow-y: auto;
}

.blue-number,
.green-number {
  height: 32px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  padding: 0 13px;
  font-size: 14px;
  border-radius: 5px;

  & > span:first-of-type {
    color: #000;
    margin-right: 20px;
  }
}

.blue-number {
  background-color: rgba(57, 130, 250, 0.1);
  margin-right: 11px;

  & > span:last-of-type {
    color: #3982fa;
  }
}

.green-number {
  background-color: rgba(73, 178, 35, 0.05);

  & > span:last-of-type {
    color: #429f21;
  }
}

.supervisor-search {
  height: 20%;
  margin-top: 10px;

  ::v-deep .el-radio-group {
    display: flex;
    //white-space: nowrap;
    flex-wrap: wrap;
    .el-radio-button {
      flex: 1;
      // border-radius:12px;
      .el-radio-button__inner {
        width: 100%;
      }
    }
  }
}

.supervisor-content {
  height: calc(80% - 10px);
  width: 100%;
  display: flex;
  align-items: center;

  ::v-deep .supervisor-progress {
    margin-right: 20px;
    .supervisor-progress-text {
      text-align: center;
      color: #2c2c2c;
    }

    .el-progress__text {
      font-size: 42px;
      font-weight: bold;
      color: #2c2c2c;
    }
  }

  .supervisor-number {
    flex: 1;
    text-align: center;

    span {
      display: block;
    }

    &:last-of-type {
      & > span:first-of-type::before {
        background-color: #e3f3dd !important;
      }
    }

    & > span:first-of-type {
      color: #666666;
      margin-bottom: 10px;

      &::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: #5ec738;
        margin-right: 14px;
        vertical-align: middle;
      }
    }

    & > span:last-of-type {
      color: #2c2c2c;
      font-size: 28px;
      font-weight: bold;

      &::after {
        content: "万元";
        font-size: 16px;
        display: inline-block;
        margin-left: 5px;
        font-weight: normal;
        color: #000;
        vertical-align: middle;
      }
    }
  }
}
</style>
